<template>
<h1>Dialog对话框 展示案例</h1>
<Demo :component="dialog1demo"></Demo>
<Demo :component="dialog2demo"></Demo>
</template>

<script lang="ts">
import Demo from './showDemo.vue';
import dialog1demo from '../codes/dialog1demo.vue';
import dialog2demo from '../codes/dialog2demo.vue';
export default {
    components: {
        Demo
    },
    setup() {
        return {
            dialog1demo,
            dialog2demo
        }
    }
}
//原dialog使用的JS代码  
// import Button from '../lib/Button.vue'
// import Dialog from '../lib/Dialog.vue'
// //.ts导入时可无需加后缀，函数或变量需要用{}标注，而组件标签则无须，直接写入即可
// import {
//     showDialog
// } from '../lib/showDialog'
// import {
//     ref,
//     h
// } from 'vue'
// export default {
//     components: {
//         Dialog,
//         Button
//     },
//     setup() {
//         const x = ref(false);
//         const toggle = () => {
//             x.value = !x.value;
//             console.log(x);
//         }
//         const f1 = () => {
//             //这个是用来实现控制触发条件来返回true/false实现ok开启关闭
//             return true;
//         }
//         const f2 = () => {

//         }
//         const openDialog = () => {
//             //简单执行打开Dialog，通过调用页外函数，把需要的参数值传过去，且需要引入,通过加入h可以渲染页面元素，如现在加粗了标题
//             showDialog({
//                 title: h('strong', {}, '标题'),
//                 content: '你好',
//                 ok() {
//                     console.log('ok')
//                 },
//                 cancel() {
//                     console.log('cancel')
//                 }
//             })
//         }
//         return {
//             x,
//             toggle,
//             f1,
//             f2,
//             openDialog
//         };
//     }
// }
</script>
